<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Home</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
  <!-- Fontastic Custom icon font-->
  <link rel="stylesheet" href="css/fontastic.css">
  <!-- Google fonts - Poppins -->
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="css/custom.css">
  <!-- student-->
  <link rel="stylesheet" href="css/common.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="img/favicon.png">
</head>

<body>
  <div class="page">
    <!-- Main Navbar-->
    <header class="header">
      <nav class="navbar">
        <!-- Search Box-->
        <div class="search-box">
          <button class="dismiss"><i class="icon-close"></i></button>
          <form id="searchForm" action="#" role="search">
            <input type="search" placeholder="What are you looking for..." class="form-control">
          </form>
        </div>
        <div class="container-fluid">
          <div class="navbar-holder d-flex align-items-center justify-content-between">
            <!-- Navbar Header-->
            <div class="navbar-header">
              <!-- Navbar Brand --><a href="#" class="navbar-brand d-none d-sm-inline-block">
                <div class="brand-text d-none d-lg-inline-block"><span>桂林电子科技大学</span><strong>在线考试系统</strong></div>
              </a>
              <!-- Toggle Button--><a id="toggle-btn" href="#"
                class="menu-btn active"><span></span><span></span><span></span></a>
            </div>
            <!-- Navbar Menu -->
            <ul class="nav-menu list-unstyled d-flex flex-md-row align-items-md-center">
              <!-- Search-->
              <li class="nav-item d-flex align-items-center"><a id="search" href="#"><i class="icon-search"></i></a>
              </li>
              <!-- Notifications-->
              <li class="nav-item dropdown"> <a id="notifications" rel="nofollow" data-target="#" href="#"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-link"><i
                    class="fa fa-bell-o"></i><span class="badge bg-red badge-corner">12</span></a>
                <ul aria-labelledby="notifications" class="dropdown-menu">
                  <li><a rel="nofollow" href="#" class="dropdown-item">
                      <div class="notification">
                        <div class="notification-content"><i class="fa fa-envelope bg-green"></i>你有。条信息 </div>
                        <div class="notification-time"><small>4分钟前</small></div>
                      </div>
                    </a></li>
                  <li><a rel="nofollow" href="#" class="dropdown-item">
                      <div class="notification">
                        <div class="notification-content"><i class="fa fa-twitter bg-blue"></i>你有。条通知</div>
                        <div class="notification-time"><small>10分钟前</small></div>
                      </div>
                    </a></li>
                  <li><a rel="nofollow" href="#" class="dropdown-item all-notifications text-center"> <strong>显示所有
                      </strong></a></li>
                </ul>
              </li>
              <!-- Logout    -->
              <li class="nav-item"><a href="login.html" class="nav-link logout"> <span
                    class="d-none d-sm-inline">退出登录</span><i class="fa fa-sign-out"></i></a></li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <div class="page-content d-flex align-items-stretch">
      <!-- Side Navbar -->
      <nav class="side-navbar">
        <!-- Sidebar Header-->
        <div class="sidebar-header d-flex align-items-center">
          <div class="avatar"><img src="img/avatar-1.jpg" alt="..." class="img-fluid rounded-circle"></div>
          <div class="title">
            <h1 class="h4">邓应卓</h1>
            <p>同学</p>
          </div>
        </div>
        <!-- Sidebar Navidation Menus--><span class="heading">主要功能</span>
        <ul class="list-unstyled">
          <li><a href="index.html"> <i class="icon-home"></i>首页</a></li>
          <li><a href="my_exam.html"> <i class="icon-grid"></i>我的试卷 </a></li>
          <li class="active"><a href="#"> <i class="icon-padnote"></i>我的班级</a></li>
          <li><a href="login.html"> <i class="icon-interface-windows"></i>退出系统 </a></li>
        </ul><span class="heading">个性管理</span>
        <ul class="list-unstyled">
          <li> <a href="personal_info.html"> <i class="icon-flask"></i>个人信息 </a></li>
          <li> <a href="mod_password.html"> <i class="icon-screen"></i>修改密码 </a></li>
        </ul>
      </nav>
      <div class="content-inner">
        <header class="page-header">
          <div class="container-fluid">
            <h2 class="no-margin-bottom">班级信息</h2>
          </div>
        </header>

        <section class="tables">
          <div class="container-fluid">
            <div class="row">
              <div class="col-lg-12">
                <!-- sereach condition -->
                <div class="card">
                  <div class="card-close">
                    <div class="dropdown">
                      <button type="button" id="closeCard3" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false" class="dropdown-toggle"><i class="fa fa-ellipsis-v"></i></button>
                      <div aria-labelledby="closeCard3" class="dropdown-menu dropdown-menu-right has-shadow"><a href="#"
                          class="dropdown-item remove"> <i class="fa fa-times"></i>Close</a><a href="#"
                          class="dropdown-item edit"> <i class="fa fa-gear"></i>Edit</a></div>
                    </div>
                  </div>
                  <div class="card-body">
                    <form class="form-inline">
                      <!-- 学院选择 -->
                      <div class="form-group">
                        <label class="mr-2">学院</label>
                        <select id="xy" name="account" class="form-control mr-4">
                          <option style="display: none;">--请选择--</option>
                        </select>
                      </div>
                      <!-- 专业选择 -->
                      <div class="form-group">
                        <label class="mr-2">专业</label>
                        <select id="zy" name="account" class="form-control mr-4">
                          <option style="display: none;">--请选择--</option>

                        </select>
                      </div>
                      <div class="form-group">
                        <button id="class_btn" type="submit" class="btn btn-primary">确认加入</button>
                      </div>
                    </form>
                  </div>
                </div>
                <div class="card-body">
                  <div class="table-responsive">
                    <table class="table table-striped" style="text-align: center;">
                      <thead>
                        <tr>
                          <th>序号</th>
                          <th>学院</th>
                          <th>专业</th>
                          <th>课程名称</th>
                          <th>课程教师</th>
                          <th>班级</th>
                          <th>班级人数</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                          <tr>
                            <td colspan="8">还没有加入班级</td>
                          </tr>
                      </tbody>
                    </table>
                  </div>
                </div>

              </div>
            </div>
        </section>


        <!-- Page Footer-->
        <footer class="main-footer">
          <div class="container-fluid">
            <div class="row">
              <div class="col-sm-6">
                <p>Copyright &copy; 桂林电子科技大学</p>
              </div>
              <div class="col-sm-6 text-right">
                <p>
                  在线考试系统
                </p>
              </div>
            </div>
          </div>
        </footer>
      </div>

    </div>
  </div>
  <!-- JavaScript files-->
  <script src="vendor/jquery/jquery.min.js"></script>
  <script src="vendor/popper.js/umd/popper.min.js"> </script>
  <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
  <!-- <script src="vendor/jquery.cookie/jquery.cookie.js"> </script> -->
  <!-- <script src="vendor/chart.js/Chart.min.js"></script> -->
  <!-- <script src="vendor/jquery-validation/jquery.validate.min.js"></script> -->
  <!-- <script src="js/charts-home.js"></script> -->
  <!-- Main File-->
  <script src="js/front.js"></script>
  <script text="text/javascript" src="js/selector.js"></script>

  <script text="text/javascript">
    $(document).ready(function () {
      selectlist = [
        ['艺术与设计学院', '数字媒体技术', '动画专业'],
        ['计算机与科学学院', '软件工程', '计算机与科学技术']
      ];
      initSelection(selectlist);


      $('#zy').change(function () {
        var classes;
        if ($(this).find('option:selected').text() == "数字媒体技术") {
          classes = [
            ["1", "数字媒体技术", "艺术与设计学院", "Bootstrap框架与应用", "胡清钟", "17004202", "26"],
            ["2", "数字媒体技术", "艺术与设计学院", "Bootstrap框架与应用", "胡清钟", "17004202", "26"]
          ];
        }
        if ($(this).find('option:selected').text() == "软件工程") {
          classes = [
            ["1", "软件工程", "软件工程", "软件工程", "刘俊景", "17004202", "24"],
            ["2", "软件工程", "软件工程", "软件工程", "刘俊景", "17004202", "24"]
          ];
        }
        var tbody = $('.table tbody');
        tbody.empty();
        for (let i = 0; i < classes.length; i++) {
          var tr = $('<tr>');
          for (let j = 0; j < classes[i].length; j++) {
            var td = $('<td>').text(classes[i][j]);
            tr.append(td);
          }
          var td = $('<td>');
          td.append($('<input/>', {
            type: 'radio',
            name: 'options',
            value: '1'
          }));
          tr.append(td);
          $(tbody).append(tr);
        }
      })
    })
  </script>
</body>

</html>